<template>
     <el-dialog title="人员列表" append-to-body :visible.sync="visible">
      <el-form :inline="true" size="small" :model="user" ref="user">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="user.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getUser(true)"
            >搜索</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-setting"
            size="small"
            @click="reset('user')"
            >重置</el-button
          >
          <el-button
            type="primary"
            size="small"
            :disabled="selectItem.length == 0"
            @click="add()"
            >确认</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        :row-key="getRowKeys"
        @selection-change="handleSelectionChange"
        ref="table"
        border
        stripe
      >
        <el-table-column
          type="selection"
          width="45"
          :reserve-selection="true"
        ></el-table-column>
        <el-table-column label="序号" width="50" :index="1">
          <template #default="scope">
            {{ (user.pageNum - 1) * user.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          show-overflow-tooltip
          resizable
          label="真实姓名"
        />
      </el-table>
      <el-row>
        <el-pagination
          class="page-footer"
          background
          layout="total,prev,pager,next,sizes,jumper"
          :total="total"
          :page-sizes="[10, 20, 30, 40, 50]"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        />
      </el-row>
    </el-dialog>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { getUserList } from "@/api/system_api";
export default {
    data() {
        return {
            tableData: [],
            selectItem: [],
            total: 0,
            visible: false,
            user: {
                 name: "",
                pageNum: 1,
                pageSize: 10,
            }
        }
    },
     computed: {
    ...mapGetters(["findType"])
  },
    methods: {
        openList(e) {
            this.user.name = ''
            this.selectItem = []
            this.getUserData(true,e)
      },
        async getUserData(flag,e) {
            let param = {};
            param.name = this.user.name
            param.userType = e
            param.statusFlag = "1";
            param.pageSize = 2000;
            param.pageNum = 1;
            const { data } = await getUserList(param);
            this.tableData = data?.list ?? [];
            this.total = data?.total ?? 0
            if (flag) {
                this.visible = true
            }
        },
        handlePageChange(page) {
            this.user.pageNum = page;
            this.getUser(true);
        },
        handleSizeChange(page) {
            this.user.pageSize = page;
            this.getUser(true);
        },
        reset(formName) {
            this.$refs[formName].resetFields();
            this.getUser(true);
        },
        getRowKeys(row) {
            return row.id;
        },
        handleSelectionChange(val) {
            let selectItem = [];
            val.forEach(item => {
                selectItem.push(item);
            });

            this.selectItem = selectItem
            if (val.length == 0) {
                this.selectItem = [];
            }
        },
        add() {
            this.visible = false
            this.$emit('onOk',this.selectItem)
        }
    }
}
</script>
